<template>
  <view class="container">
	  <view class="uni-common-mt">
	  			<view class="uni-form-item uni-column">
	  				<view class="title">号码查询</view>
	  				<input class="uni-input"  v-model="phoneNumber" focus placeholder="请输入号码" />
	  			</view>
	 </view>

    <!-- <button @click="queryNumber">查询</button> -->
	<view class="uni-padding-wrap uni-common-mt">
				<!-- <button type="primary">页面主操作 Normal</button>
				<button type="primary" loading="true">页面主操作 Loading</button>
				<button type="primary" disabled="true">页面主操作 Disabled</button>
				<button type="default">页面次要操作 Normal</button>
				<button type="default" disabled="true">页面次要操作 Disabled</button>
				<button type="warn">警告类操作 Normal</button>
				<button type="warn" disabled="true">警告类操作 Disabled</button> -->
				<view class="button-sp-area">
					<button type="primary" plain="true" @click="queryNumber" size="mini">查询</button>
					<!-- <button type="primary" disabled="true" plain="true">不可点击的按钮</button>
					<button type="default" plain="true">按钮</button>
					<button type="default" disabled="true" plain="true">按钮</button>
					<button class="mini-btn" type="primary" size="mini">按钮</button>
					<button class="mini-btn" type="default" size="mini">按钮</button>
					<button class="mini-btn" type="warn" size="mini">按钮</button> -->
				</view>
			</view>
    <view v-if="result !== ''">
      <text>查询结果：{{ result }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: '',
      result: ''
    };
  },
  methods: {
    queryNumber() {
      // 这里应该调用后端API进行号码查询
      // 但为了演示，我们直接模拟一个结果
      if (this.phoneNumber.length === 11 && /^\d+$/.test(this.phoneNumber)) {
        // this.result = '这是一个有效的手机号';
		let that=this;
		uni.request({
		    url: 'https://api.cenguigui.cn/api/saorao/', // 请求的 URL
		    method: 'GET', // 请求方法，这里指定为 GET
		    data: {
		        // GET 请求通常将参数附加到 URL 上，但这里的数据会被框架自动拼接到 URL 后面
		        // 例如：https://example.com/api/data?param1=value1&param2=value2
		        tel: that.phoneNumber,
		        // param2: 'value2'
		    },
		    header: {
		        // 请求头，可以包含认证信息、内容类型等
		        'Content-Type': 'application/json' // 注意：对于 GET 请求，通常不需要设置 Content-Type 为 json，因为 GET 请求不发送请求体
		        // 但在某些情况下，你可能需要设置自定义头信息，比如 Authorization
		    },
		    success: (res) => {
		        // 请求成功的回调函数
		        console.log(res.data); // 输出服务器返回的数据
		        that.result=res.data.data[0].msg
				  },
		    fail: (err) => {
		        // 请求失败的回调函数
		        console.error(err); // 输出错误信息
		    }
		});
      } else {
        this.result = '请输入有效的11位手机号';
      }
	 
    }
  }
};
</script>

<style scoped>
.container {
  padding: 30rpx;
}

.title {
  font-size: 24rpx;
  font-weight: bold;
  text-align: center;
}

input {
  width: 80%;
  padding: 10rpx;
  margin: 10rpx auto;
  border: 1rpx solid #ccc;
  border-radius: 4rpx;
}

button {
  width: 80%;
  /* padding: 20rpx; */
  /* margin: 10rpx auto; */
  margin-left: 70rpx;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 4rpx;
}

button:active {
  background-color: #005bb5;
}

.centered-content {
  /* 使用 Flexbox 布局 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  /* 可选：设置子元素的一些样式 */
  height: 100%; /* 让子元素填满容器高度，这里不是必须的，取决于你的布局需求 */
}
</style>